<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center" v-if="stepIndex==0">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">三类人员培训报名</h3>
                    <!-- <p style="margin-top: 20px;font-size: 18px;">温馨提示：如上次考试未通过，请点击
                        <router-link to="/home/apply/apply_common_nopay/slry_resit" style="color: #1466D0;font-size: 19px;font-weight: 600;">补考入口</router-link>
                        进行补考报名
                    </p> -->
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project">
                            <el-select v-model="typeName" placeholder="选择专业" @change="typeChange">
                                <el-option v-for="item in chooseTypes" :key="item.typeCode" :label="item.typeName"
                                    :value="item.typeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="选择学历：">
                            <el-select v-model="form.educationBackground" placeholder="选择学历">
                                <el-option v-for="item in educations" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="选择职称：">
                            <el-select v-model="form.professionalTitle" placeholder="选择职称">
                                <el-option v-for="item in professionals" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item class="text_left" label="考务费：">
                            <p class="apply_p">0元</p>
                        </el-form-item> -->
                        <el-form-item label="培训费：" class="choose_project text_left">
                            <span>{{form.price}}元</span>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>

                        <el-form-item style="margin-left: -120px;" class="checkAgree">
                            <el-checkbox v-model="checkAgree">已阅读并同意遵守<span @click="changeAgree" class="applyxieyi">《培训报名信息协议》</span></el-checkbox>
                        </el-form-item>
                        <el-form-item class="apply_btns">
                            <router-link class="apply_return" to="/study/apply/exam_apply">返回</router-link>
                            <a @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>

                    <!-- 选择发票 -->
                    <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>

                </div>
                <div class="border_content text_center" v-if="stepIndex==1">
                    <img src="/static/img/title2.png" class="contTitleImg">
                    <h3 class="apply_title">三类人员培训报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="报考专业：">
                            <p class="apply_p">{{typeName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="学历：">
                            <el-select v-model="form.educationBackground" disabled>
                                <el-option v-for="item in educations" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="职称：">
                            <el-select v-model="form.professionalTitle" disabled>
                                <el-option v-for="item in professionals" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item class="text_left" label="考务费：">
                            <p class="apply_p">0元</p>
                        </el-form-item> -->
                        <el-form-item class="text_left" label="培训费：">
                            <p class="apply_p">{{form.price}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project">
                            <p v-if="form.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="form.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns confirm_btns" style="margin: 30px 0;"> 
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="prevStep">上一步</a>
                            <a @click="confirmPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
        <!-- 协议弹框 -->
        <el-dialog title="培训报名协议信息" class="userXuXieDialog" center :visible.sync="checkAgreeDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <userXieyi></userXieyi>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="checkAgreeDialog = false">我已阅读并同意</el-button>
            </span>
        </el-dialog>
        <!-- 用户须知 -->
        <el-dialog title="三类人员考前培训报名须知" class="userXuXieDialog" center :visible.sync="userXuDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <slryPerson></slryPerson>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="userXuDialog = false">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    import userXieyi from '../../../components/userExamXuZhi/user_xieyi.vue'
    import slryPerson from '../../../components/userExamXuZhi/slry_person.vue'

    export default {
        name: "slry_apply",
        data: function() {
            return {
                chooseTypes: [{
                        "typeName": "企业主要负责人（A证）",
                        "typeCode": "sl_a"
                    },
                    {
                        "typeName": "工程项目负责人（B证）",
                        "typeCode": "sl_b"
                    },
                    {
                        "typeName": "专职安全生产管理人员（C证）",
                        "typeCode": "sl_c"
                    }
                ],
                userXuDialog: false, //用户须知
                checkAgreeDialog: false, //用户协议弹框
                checkAgree: false,
                educations: [{
                        value: '0',
                        label: '初中'
                    },
                    {
                        value: '1',
                        label: '职高'
                    },
                    {
                        value: '2',
                        label: '高中'
                    },
                    {
                        value: '3',
                        label: '高技'
                    },
                    {
                        value: '4',
                        label: '中专'
                    },
                    {
                        value: '5',
                        label: '专科'
                    },
                    {
                        value: '6',
                        label: '本科'
                    },
                    {
                        value: '7',
                        label: '硕士'
                    },
                    {
                        value: '8',
                        label: '博士'
                    },
                    {
                        value: '9',
                        label: '其他'
                    }
                ],
                professionals: [{
                        value: '0',
                        label: '无'
                    }, {
                        value: '1',
                        label: '初级'
                    },
                    {
                        value: '2',
                        label: '中级'
                    },
                    {
                        value: '3',
                        label: '高级'
                    }
                ],
                stepIndex: 0, //是否显示选择专业弹框
                dialogNoPay: false,
                typeName: '',
                form: {
                    identity: "",
                    userName: "",
                    educationBackground: '', //学历
                    professionalTitle: '', //职称
                    productCode: "",
                    invoiceTempId: "",
                    invoiceType: 0,
                    price: 0
                },
                projectCode: this.$route.params.type,
                dialogVisible: false, //选择专业
                ticketDialogs: false, //选择发票
                invoiceTitle: "",
                currentApply: undefined,
                products: []
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.form.userName = info.realName;
                that.form.identity = info.identityCode;
                that.userXuDialog = true;
            });

			this.common.post(this.api.getProducts, {}, function(res) {
			    that.products = res.resultMap;
			});
        },
        methods: {
            invoiceBtn: function(data) {
            	this.invoiceTitle = data.invoiceTitle;
            	this.form.invoiceType = data.invoiceType;
            	this.form.invoiceTempId = data.invoiceTempId;
            },
            invoiceFunc: function() {
            	this.$refs.invoiceChild.getInvoiceTemp();
            },
            typeChange: function(val) {
                var that=this;
                this.form.productCode = val;
                this.products.forEach(function(v, i) {
                    if (v.productCode == val+"") {
                        that.form.price = v.productPrice;
                    }
                });
                this.chooseTypes.forEach(function(v, i) {
                    if (v.typeCode == val) {
                        that.typeName = v.typeName;
                    }
                });
            },
            changeAgree: function() {
                this.checkAgreeDialog = true;
            },
            // 报名提交
            onSubmit: function(form) {
                var that = this;
                if (that.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }
                if (String.isEmptyOrNUll(this.form.educationBackground)) {
                    this.$message.error("请选择学历！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.professionalTitle)) {
                    this.$message.error("请选择职称！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.invoiceTempId)) {
                    this.$message.error("请选择发票！");
                    return;
                }
                if (!this.checkAgree) {
                    this.$message.error("请阅读并勾选报名协议！");
                    return;
                }
                this.stepIndex = 1;
            },
            //上一步
            prevStep: function() {
                this.stepIndex = 0;
            },
            //去付款
            confirmPay: function() {
                var that = this;
                this.common.post(this.api.slryExamApplyPay, this.form, function(data) {
                    that.common.toPage("/home/apply/zhifubaopre/" + data.resultMap);
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            }
        },
        components: {
            headerFooter,
            ticketDialog,
            userXieyi,
            slryPerson
        }
    }
</script>

<style>
    .el-checkbox {
        margin-right: 0;
    }
</style>
